<template>
  <div class="footer">
    <div class="footerNav" :class="{ active: activeIcon === 'home' }" @click="setActive('home')">
      <svg class="icon" aria-hidden="true">
        <use :xlink:href="activeIcon === 'home' ? '#icon-shouye' : '#icon-shouye2'"></use>
      </svg>
      <div class="text">首页</div>
    </div>
    <div class="footerNav" :class="{ active: activeIcon === 'order' }" @click="setActive('order')">
      <svg class="icon" aria-hidden="true">
        <use :xlink:href="activeIcon === 'order' ? '#icon-dingdan1'  :'#icon-dingdan'"></use>
      </svg>
      <div class="text">订单</div>
    </div>
    <div class="footerNav" :class="{ active: activeIcon === 'news' }" @click="setActive('news')">
      <svg class="icon" aria-hidden="true">
        <use :xlink:href="activeIcon === 'news' ? '#icon-xiaoxi2' :'#icon-xiaoxi1' "></use>
      </svg>
      <div class="text">消息</div>
    </div>
    <div class="footerNav" :class="{ active: activeIcon === 'myinfo' }" @click="setActive('myinfo')">
      <svg class="icon" aria-hidden="true">
        <use :xlink:href="activeIcon === 'myinfo' ? '#icon-wode' : '#icon-wode-copy'"></use>
      </svg>
      <div class="text">我的</div>
    </div>
  </div>
</template>

<script>


export default {
  data() {
    return {
      activeIcon: '' // 用于存储当前激活的图标
    };
  },

  methods: {
    setActive(icon) {
    this.activeIcon = icon;
  setTimeout(()=>{
    console.log("点击了")
    this.goToPage(icon);
    this.activeIcon = icon;
  },200);
   
  },

  goToPage(icon) {
    if (icon === 'home') {
      this.$router.push('/');
    } else if (icon === 'order') {
      this.$router.push('order');
    } else if (icon === 'news') {
      this.$router.push('news');
    } else if (icon === 'myinfo') {
      this.$router.push('myinfo');
    }
  }
}
}
</script>

<style scoped>
.footer {
  display: flex;
  justify-content: space-around;
  width: 100%;
}
.text {
  font-size: 16px;
  text-align: center;
  margin-left: -5px;
}

</style>